<template>
  <div class="page-container">
    <div class="in-container">
      <AppSearchForm
        @submit="search"
        @reset="reset"
      >
        <el-form-item>
          <el-input
            v-model="query.name"
            clearable
            placeholder="输入标题搜索"
            style="width: 200px"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="query.Account"
            clearable
            placeholder="输入发布人搜索"
            style="width: 200px"
          />
        </el-form-item>
      </AppSearchForm>
      <div class="btnBox">
        <el-button
          type="primary"
          @click="bathMark"
        > 全部标记为已读 </el-button>
      </div>
      <AppPageTable
        stripe
        :data="tableData.data"
        @change="getList"
        :autostyle="'height: calc(100% - 75px);'"
        :option="tableData.option"
      >
        <el-table-column
          type="selection"
          width="40"
          align="center"
        />
        <el-table-column
          prop="title"
          label="标题"
        />
        <el-table-column
          prop="sendStatus"
          label="消息类型"
        >
          <template #default="scope">
            {{ scope.row.sendStatus == "1" ? "通知消息" : "系统消息" }}
          </template>
        </el-table-column>
        <el-table-column
          prop="sendPerson"
          label="发布人"
        />
        <el-table-column
          prop="sendTime"
          label="发布时间"
        />
        <el-table-column
          prop="readFlag"
          label="阅读状态"
        >
          <template #default="scope">
            {{ scope.row.readFlag == "Y" ? "已读" : "未读" }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="130px"
        >
          <template #default="scope">
            <el-button
              @click="takeDetail(scope.row, scope.$index)"
              link
              type="primary"
            >查看</el-button>
          </template>
        </el-table-column>
      </AppPageTable>
      <el-dialog
        width="800px"
        v-model="dialogData.show"
        title="查看详情"
      >
        <div class="detail-dialog">
          <div class="header">
            <h2>
              {{ dialogData.data.title ?? "标题" }}
            </h2>
            <span>
              {{
                `发布人:  ${dialogData.data.sendPerson ?? "暂无"
                  } , 发布时间:  ${dialogData.data.sendTime ?? "暂无"}`
              }}
            </span>
          </div>
          <div class="content">
            <el-skeleton
              :loading="dialogData.contentLoading"
              animated
            >
              <template #template>
                <el-skeleton-item variant="text" />
                <el-skeleton-item variant="text" />
              </template>
              <template #default>
                {{ dialogData.msgContent ?? "-" }}
              </template>
            </el-skeleton>
          </div>
        </div>
      </el-dialog>

      <el-dialog
        width="416px"
        v-model="confirmShow"
        title=""
        :show-close="false"
      >
        <div class="confirm-title"><el-icon
            size="22"
            color="#fbbc40"
          >
            <Warning />
          </el-icon><span class="confirm-tip">确认阅读所选中数据?</span></div>
        <div class="confirm-content">
          当前选中编号为&nbsp;{{ confirmSelectId }}的数据
        </div>

        <template #footer>
          <div>
            <el-button @click="confirmShow = false"> 取消 </el-button>
            <el-button
              type="primary"
              @click="confirmSubmit"
            > 确认 </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import dayjs from "dayjs";
import AppSearchForm from "@/components/AppSearchForm.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import { ElMessageBox } from "element-plus";
import { Warning } from "@element-plus/icons";
export default defineComponent({
  components: {
    AppSearchForm,
    AppPageTable,
  },
  data() {
    return {
      tableData: {
        data: [],
        option: useTableOption(),
      },
      query: {
        name: "",
        Account: "",
      },
      dialogData: {
        show: false,
        data: {},
        contentLoading: false,
        msgContent: "",
      },
      confirmShow: false,
      confirmSelectId: "",
      idList: [],
    };
  },
  methods: {

    bathMark() {
      if (this.tableData.option.selected.length == 0) {
        this.$message.warning("请至少选择一条数据");
        return
      };
      this.confirmShow = true;
      this.idList = [];
      this.tableData.option.selected.forEach(item => {
        this.idList.push(item.id);
      });
      this.confirmSelectId = this.idList.join();
    },

    async confirmSubmit() {
      let res = await this.$http.post("/api/noticesend/readbatch", {
        idArray: this.idList,
      });
      if (res.status) {
        this.$message.success(res.message);
        this.$store.dispatch("unReadMessage/getUnReadMessageData");
        this.confirmShow = false;
        this.search();
      } else {
        this.$message.warning(res.message);
      }
    },

    search() {
      this.tableData.option.page = 1;
      this.getList();
    },
    getList() {
      this.tableData.option.loading = true;
      this.$http
        .get("/api/noticesend/query", {
          PageIndex: this.tableData.option.page,
          PageSize: this.tableData.option.pageSize,
          KeyWords: this.query.name,
          Account: this.query.Account,
        })
        .then((res) => {
          this.tableData.data = res.content;
          this.tableData.option.total = res.totalElements;
        })
        .finally(() => {
          this.tableData.option.loading = false;
        });
    },
    reset() {
      this.tableData.option.page = 1;
      this.tableData.option.pageSize = 10;
      this.query = {
        name: "",
        Account: "",
      };
      this.search();
    },
    takeDetail(data, index) {
      this.dialogData.show = true;
      this.dialogData.data = data;

      if (data.readFlag == "N") {
        this.$http
          .post("/api/noticesend/read", {
            id: data.id,
            readFlag: "Y",
          })
          .then((res) => {
            if (res.status) {
              this.tableData.data[index].readFlag = "Y";
            }
          });
      }

      this.dialogData.contentLoading = true;

      this.$http.get(`/api/notice/${data.noticeId}`).then((res) => {
        this.dialogData.contentLoading = false;
        this.dialogData.msgContent = res.msgContent;
      });
      this.$store.dispatch('unReadMessage/readMessage', data)
    },
  },
  created() {
    this.search();
  },
});
</script>

<style lang="scss" scoped>
.btnBox {
  margin-bottom: 8px;
}


.confirm-title {
  margin-bottom: 8px;
  display: flex;
  align-items: center;

  .confirm-tip {
    color: rgba(0, 0, 0, .85);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    margin-left: 8px;
  }
}


.confirm-content {
  margin-left: 31px;
  color: rgba(0, 0, 0, .65);
  font-size: 14px;
  word-break: break-all;
  max-height: 300px;
  overflow-y: auto;
}



.detail-dialog {
  border-radius: 4px;
  border: 2px solid rgb(232, 232, 232);
  padding: 8px;

  .header {
    padding-bottom: 8px;
    font-size: 14px;
    border-bottom: 1px solid rgb(232, 232, 232);

    h2 {
      margin-bottom: 16px;
    }
  }

  .content {
    padding-top: 8px;
  }
}
</style>
